
<div class="row fullPage">

  <div class="col-md-4 col-12 mb-md-0 mb-4">

    <mat-card class="h-100 tree-card">
      <mat-card-content class="h-100 max-height-full">
        <div class="row">
          <div class="col-12">

            <!-- Search textbox to filter available files -->
            <app-ide-searchbox
              (toggleFileSystems)="tree.systemFiles = $event;tree.updateFileObject('/')"
              (filterList)="filterList($event)"
              #search>
            </app-ide-searchbox>

          </div>
        </div>

        <div class="row scrollable-row">
          <div class="col-12 max-height">

            <!-- Tree to allow for browsing and opening files -->
            <app-ide-tree
              #tree
              [searchKey]="searchKey"
              (showEditor)="showEditor($event)"
              (clearEditorHistory)="editor.clearEditorHistory($event)"
              (setFocusToActiveEditor)="editor.setFocusToActiveEditor()">
            </app-ide-tree>

          </div>
        </div>

      </mat-card-content>
    </mat-card>

  </div>

  <div class="col-md-8 col-12">

    <mat-card class="h-100 px-3 py-2">
      <mat-card-content class="h-100 max-height-full">

        <!-- Editor surface for allowing user to edit open files -->
        <app-ide-editor
          class="h-100 d-block"
          #editor
          [currentFileData]="currentFileData"
          [activeFolder]="tree.activeFolder"
          [openFiles]="tree.openFiles"
          (updateFileObject)="tree.updateFileObject($event)"
          (focusToFind)="focusToFind()"
          (getFilesFromServer)="tree.getFilesFromServer()"
          (dataBindTree)="tree.dataBindTree()"
          (deleteActiveFolderFromParent)="tree.deleteActiveFolder()"
          (deleteActiveFileFromParent)="tree.deleteActiveFile()"
          (renameFileFromParent)="tree.renameFile($event)"
          (workflowFilesChanged)="tree.updateWorkflowFiles()"
          (renameFolderFromParent)="tree.renameFolder($event)"
          (createNewFileObjectFromParent)="tree.createNewFileObject($event)"
          (closeFile)="tree.closeFile($event)">
        </app-ide-editor>

      </mat-card-content>
    </mat-card>

  </div>
</div>